<template>
    <van-nav-bar
        title="邮箱验证"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field label="邮箱地址" :model-value="email" readonly :rules="emailRule" />
            <van-field
                v-model="code"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
                name="code"
                :rules="[{ required: true, message: '请输入验证码' }]"
            >
                <template #button>
                    <van-button style="width: 78px;" size="small" type="primary" :disabled="disabled" @click="sendCode">{{message}}</van-button>
                </template>
            </van-field>
        </van-cell-group>

        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
            提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup>
    let {proxy} = getCurrentInstance()
    let userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{}
    let email = ref(userInfo.email)

    // 发送按钮
    let message = ref("发送验证码")
    let disabled = ref(false)

    // 验证码
    let code = ref()
    // 返回上一级
    const onClickLeft = () => history.back();

    // 发送验证码
    const sendCode = async () => {
        // 修改按钮文本
        message.value = "正在发送..."
        // 修改按钮为不可用
        disabled.value = true
        // 封装数据
        let data = {
            id:userInfo.id,
            email:email.value,
            action:"send"
        }
        let result = await proxy.$POST({
            url:"business/email",
            params:data
        })

        if(result.code){
            // 验证码发送成功
            let flag = 60
            message.value = flag + "s"           
            let timer = setInterval(() => {
                // 修改按钮文本            
                flag--
                message.value = flag + "s"           
                if(flag <= 0){
                    clearInterval(timer)
                    // 修改按钮文本
                    message.value = "重新发送"
                    // 修改按钮为可用
                    disabled.value = false
                }
            }, 1000);
        }else{
            // 验证码发送失败
            proxy.$fail(result.msg)
            // 修改按钮文本
            message.value = "重新发送"
            // 修改按钮为可用
            disabled.value = false
        }
    }

    // 提交验证码
    const onSubmit = async (values) => {
        // 发送请求
        let data = {
            id:userInfo.id,
            code:code.value,
            email:email.value,
            auth:userInfo.auth,
            action:"test"
        }
        let result = await proxy.$POST({
            url:"business/email",
            params:data
        })
        if(result.code){
            // 重新设置cookies
            proxy.$cookies.set("business",result.data)
            // 验证成功，跳转
            proxy.$success({
                message:result.msg,
                duration:1000,
                onClose:()=>{
                    proxy.$router.push(result.url)
                }
            })
        }else{
            // 验证失败
            proxy.$fail(result.msg)
            // 清空验证栏
            code.value = ""
            return false
        }

    };

    let emailRule = [
            {
                required:true,message:"请填写邮箱"
            },
            {
                pattern:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,6})$/,message:"邮箱格式不正确"
            }
    ]
</script>